<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>代码生成工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">-->
    <link href="css/element-ui.css" rel="stylesheet">

    <link href="lib/codemirror-5.57.0/lib/codemirror.css" rel="stylesheet">
    <link href="lib/codemirror-5.57.0/theme/idea.css" rel="stylesheet">
    <!-- 控制宽度的自动适应 -->
    <style type="text/css">
        .CodeMirror {
            height: 450px;
        }
        .template .el-dialog__body {
            padding: 1px 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div>
            <!-- 搜索 -->
            <el-form ref="queryForm" :model="queryParams" :inline="true">
                <el-form-item label="表名" prop="name">
                    <el-input
                            v-model="queryParams.tableName"
                            placeholder="请输入表名"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <el-button type="primary" icon="el-icon-download" size="mini" @click="genCodes">生成代码</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table ref="multipleTable" v-loading="loading" stripe highlight-current-row style="width: 100%;"
                      :data="dataList">
                <el-table-column type="selection"></el-table-column>
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column prop="engine" label="引擎"></el-table-column>
                <el-table-column prop="tableSchema" label="数据库名称"></el-table-column>
                <el-table-column prop="tableName" label="表名"></el-table-column>
                <el-table-column prop="tableComment" label="表注释"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="createTime" width="160" label="创建日期">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-document" @click="columnDetail(scope.row)">查看列
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-view"
                                   @click="previewTemplateCodeShow(scope.row)">
                            预览模板
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-download" @click="genCode(scope.row)">生成代码
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="queryParams.page"
                    :page-size="queryParams.limit"
                    :total="totalCount">
            </el-pagination>
        </div>
    </template>

    <el-dialog :title="title" :visible.sync="open" width="900px">
        <el-table v-loading="loading" stripe highlight-current-row style="width: 100%;" :data="columnDetailList">
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="columnName" label="列名"></el-table-column>
            <el-table-column prop="dataType" label="数据类型"></el-table-column>
            <el-table-column prop="columnComment" label="注释"></el-table-column>
            <el-table-column prop="columnKey" label="columnKey"></el-table-column>
            <el-table-column prop="extra" label="extra"></el-table-column>
        </el-table>

    </el-dialog>

    <el-dialog class="template" :title="title" :visible.sync="templateOpen" width="900px">
        <template>
            <el-tabs tab-position="left" type="border-card" v-model="activeTab">
                <el-tab-pane
                        :lazy="true"
                        :key="item.template"
                        v-for="(item, index) in templateCodeList"
                        :label="item.template.slice(0,item.template.length-4)"
                        :name="item.template"
                >
                    <Codemirror :value="item.templateCode"/>
                </el-tab-pane>
            </el-tabs>
        </template>

    </el-dialog>


</div>
</body>

<!-- 先引入 Vue -->
<script src="js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="js/element-ui.js"></script>
<script src="js/axios.min.js"></script>

<script src="lib/codemirror-5.57.0/lib/codemirror.js"></script>
<script src="lib/codemirror-5.57.0/mode/clike/clike.js"></script>
<script src="js/codemirroe-template.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                // 遮罩层
                loading: true,
                currentId: undefined,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                totalCount: 0,
                // 表格数据
                dataList: [],
                columnDetailList: [],
                //模板预览
                templateCodeList: [],
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                open: false,
                templateOpen: false,
                queryParams: {
                    page: 1,
                    limit: 10,
                    tableName: undefined
                },
                form: {},
                activeTab: '',
                editor: {}
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList: function () {
                const that = this
                this.loading = true
                axios.get('/sys/gen/list', {
                    params: this.queryParams
                }).then(function (res) {
                    //console.log(res.data.list)
                    that.loading = false
                    that.dataList = res.data.list
                    that.totalCount = res.data.totalCount

                }).catch(function (error) {
                    that.loading = false
                    that.$message.error({message: '操作失败'})
                });
            },
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`)
                this.queryParams.limit = val
                this.getList()
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`)
                this.queryParams.page = val
                this.getList()
            },
            // 查询
            handleQuery() {
                this.queryParams.page = 1
                this.getList()
            },
            // 重置查询
            resetQuery() {
                const refName = 'queryForm'
                // if (this.$refs[refName]) {
                //     this.$refs[refName].resetFields()
                // }
                this.queryParams.tableName = undefined
                this.handleQuery()
            },
            //单选导出
            genCode: function (row) {
                //console.log(row.tableName)
                let tables = row.tableName
                window.location.href = "sys/gen/genCode?tables=" + tables;

            },
            //多选导出
            genCodes: function () {
                let selection = this.$refs.multipleTable.selection;
                //console.log(selection)
                if (selection.length === 0) {
                    this.$message({
                        message: '请选择一条数据',
                        type: 'warning'
                    });
                    return
                }

                let tables = '';
                for (let i = 0; i < selection.length; i++) {
                    tables += selection[i].tableName + ",";
                }

                window.location.href = "sys/gen/genCode?tables=" + tables;


            },
            columnDetail(row) {
                this.getColumnDetail(row.tableName)
                this.open = true
                this.title = '查看表列属性'
            },

            previewTemplateCodeShow(row) {
                this.previewTemplateCode(row.tableName)
                this.templateOpen = true
                this.title = '预览模板'
            },
            getColumnDetail: function (tableName) {
                const that = this
                this.loading = true
                axios.get('sys/gen/listColumn?tableName=' + tableName)
                    .then(function (res) {
                        //console.log(res.data.list)
                        that.loading = false
                        that.columnDetailList = res.data.list

                    }).catch(function (error) {
                    that.loading = false
                    that.$message.error({message: '操作失败'})
                });
            },
            previewTemplateCode: function (tableName) {
                const that = this
                this.loading = true
                axios.get('sys/gen/previewTemplateCode?tableName=' + tableName)
                    .then(function (res) {
                        //console.log(res.data.list)
                        that.loading = false
                        that.templateCodeList = res.data.list
                        that.activeTab = res.data.list[0].template

                    }).catch(function (error) {
                    that.loading = false
                    that.$message.error({message: '操作失败'})
                });
            },
        }
    })
</script>
</html>
